import React, { memo, useCallback } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { Pagination } from 'antd'

import { ArtistAlbumWrapper ,ContentWrapper} from './style'
import { formatImg, formatTime } from '@/utils/format'
import { getArtistAlbumsAction } from '../../store/actionCreators'
import useShowAlbumDetail from '@/hooks/useShowAlbumDetail'
export default memo(function ArtistAlbum() {
  const { artistAlbums, artistId ,artistDetail} = useSelector(state => ({
    artistAlbums: state.getIn(['artist', 'artistAlbums']),
    artistId: state.getIn(['artist', 'artistId']),
    artistDetail: state.getIn(['artist','artistDetail'])
  }), shallowEqual)
  const albums = artistAlbums || []
  const goToAlbumDetail = useShowAlbumDetail()
  const dispatch = useDispatch()
  const pageChange = useCallback((page) => {
    const offset = (page - 1) * 12
    dispatch(getArtistAlbumsAction(artistId,offset))
  },[dispatch,artistId])
  return (
    <ArtistAlbumWrapper>
      <ContentWrapper>
      {
        albums.map(item => {
          return (
            <div className='item' key={item.id}>
              <img src={formatImg(item.picUrl,120)} alt="" className="image"/>
              <div className="mask sprite_covor" onClick={e => goToAlbumDetail(item.id)}></div>
              <div className="name text-nowrap">{item.name}</div>
              <div className="artist text-nowrap">{formatTime(item.publishTime,'yyyy.MM.dd')}</div>
            </div>
          )
        })
      }
      </ContentWrapper>
      <Pagination defaultCurrent={1}
                  total={artistDetail.albumSize}
                  showSizeChanger={false}
                  pageSize={12}
                  onChange={pageChange}
                  className='pagination'/>
    </ArtistAlbumWrapper>
  )
})
